<template>
  <el-dialog
    class="public-dialog"
    :title="`报关货值系数配置`"
    width="760"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div :loading="loading">
      <div
        class="flex items-center mb-[16px]"
        v-for="(item,index) in form"
        :key="item.key"
      >
        <el-select
          v-model="item.out_declare_company_id"
          placeholder="请选择主体公司"
          class="w-[150px]"
        >
          <el-option
            :label="it.seller_name"
            :value="it.id"
            v-for="it in options.declareCompany"
            :key="it"
          />
        </el-select>
        <div class="mx-[16px]">申报货值:备库单对应的采购单SKU的采购未税价</div>
        <el-input-number
          v-model="item.sp_ratio"
          :controls="false"
        ></el-input-number>
        <div class="ml-[16px]">
          <span
            class="hover:text-[#2080f0] cursor-pointer mr-[8px]"
            @click="handleAdd(index)"
          >
            <SvgIcon icon-class="Plus" class="text-[12px] inline"/>
          </span>
          <span
            class="hover:text-[#2080f0] cursor-pointer"
            @click="handleDelete(index)"
            v-if="form.length > 1"
            ><SvgIcon icon-class="Minus" class="text-[12px] inline"/>
          </span>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import SvgIcon from "@/components/SvgIcon/index.vue";
import { ElMessage } from "element-plus";
import { setDeclareValueConfig } from "../../api.js";
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  coefficientData: { type: Object, default: () => {} },
  options: { type: Object, default: () => {} },
});
const { options } = toRefs(props);
const loading = ref(false);
watch(
  () => props.coefficientData,
  (val) => {
    if (val) {
      const { sp_ls } = val;
      sp_ls?.forEach((item, index) => {
        item.key = index;
      });
      form.value = sp_ls || [];
    }
  }
);
const emit = defineEmits(["update:modelValue", "refresh", "close"]);

const form = ref([
  {
    key: 1,
    sp_ratio: null,
    out_declare_company_id: null,
  },
]);
const handleAdd = (index) => {
  let str = {
    key: +new Date(),
    sp_ratio: null,
    out_declare_company_id: null,
  };
  form.value.splice(index + 1, 0, str);
};
const handleDelete = (index) => {
  form.value.splice(index, 1);
};
const handleSave = async () => {
  try {
    if (!form.value) return ElMessage.warning("申报货值不能为空!");
    loading.value = true;
    const { code, message } = await setDeclareValueConfig({
      sp_ls: form.value,
    });
    if (code != 200) return ElMessage.error(message);
    ElMessage.success("修改成功");
    handleClose(true);
  } catch (e) {
    if (e.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const handleClose = async (refresh) => {
  form.value = [
    {
      sp_ratio: null,
      out_declare_company_id: null,
    },
  ];
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
